<template>
  <a-form layout="vertical" @finish="handleSubmit" :model="form" class="register-form">
    <!-- 头像上传 -->
    <a-form-item label="头像" class="avatar-upload-item">
      <div class="avatar-container">
        <a-upload v-model:file-list="fileList" list-type="picture-card" @change="handleAvatarChange">
          <div v-if="!form.avatar">
            <plus-outlined />
            <div class="ant-upload-text">上传头像</div>
          </div>
          <img v-else :src="form.avatar" alt="avatar" class="avatar-preview" />
        </a-upload>
      </div>
    </a-form-item>

    <!-- 用户名 -->
    <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名!' }]">
      <a-input v-model:value="form.username">
        <template #prefix>
          <UserOutlined />
        </template>
      </a-input>
    </a-form-item>

    <!-- 账户 -->
    <a-form-item label="账户" name="account" :rules="[{ required: true, message: '请输入账户!' }]">
      <a-input v-model:value="form.account">
        <template #prefix>
          <IdcardOutlined />
        </template>
      </a-input>
    </a-form-item>

    <!-- 密码 -->
    <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码!' }]">
      <a-input-password v-model:value="form.password">
        <template #prefix>
          <LockOutlined />
        </template>
      </a-input-password>
    </a-form-item>

    <!-- 性格 -->
    <a-form-item label="性格描述" name="personality" :rules="[{ required: true, message: '请简单描述您的性格!' }]">
      <a-textarea v-model:value="form.personality" :rows="3" placeholder="例：外向开朗，喜欢技术交流" />
    </a-form-item>

    <!-- 注册按钮 -->
    <a-form-item>
      <a-button type="primary" html-type="submit" block class="register-btn">
        立即注册
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import {
  UserOutlined,
  LockOutlined,
  IdcardOutlined,
  PlusOutlined
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import axios from 'axios';

const router = useRouter();
const form = ref({
  username: '',
  account: '',
  password: '',
  personality: '',
  avatar: ''
});

const fileList = ref([]);

const handleAvatarChange = ({ file }) => {
  if (file.status === 'done') {
    // 这里需要对接实际的上传接口
    form.value.avatar = URL.createObjectURL(file.originFileObj);
  }
};
//处理注册提交请求的函数
const handleSubmit = async () => {
  console.log('注册信息:', form.value);
  try {
    const response = await axios.post('http://localhost:5000/api/users/register', form.value);
    message.success(response.data.message);
    // 注册成功后跳转到登录页
    router.push('/login');
  } catch (error) {
    message.error(error.response?.data.message || '注册失败');
  }
};
</script>

<style scoped>
.avatar-upload-item {
  text-align: center;
}

.avatar-container {
  display: inline-block;
  margin: 20px 0;
}

.avatar-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.register-form {
  max-width: 500px;
  margin: 0 auto;
  padding: 24px;
}

.register-btn {
  margin-top: 20px;
  height: 40px;
}
</style>